<template>
  <div>
    <!-- 导航栏开始 -->
    <div class="nabar" ref="dh" :class="{ nabars: onoff }">
      <van-search shape="round" placeholder="大前端开发，混合京东商城系统">
      </van-search>
      <van-icon name="chat-o" class="jl" size="25" />
      <div class="hamburgerbtn">
        <span class="toutiao toutiao-gengduo"></span>
      </div>
    </div>
    <!--  导航栏结束-->
    <!-- 轮播图开始 -->
    <div ref="lbt">
      <van-swipe :autoplay="3000" ref="lbt">
        <van-swipe-item v-for="(item, index) in imglist" :key="index">
          <img :src="item.icon" class="imgsw" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 轮播图结束 -->
    <!-- 活动图 -->
    <div class="hd" ref="hd">
      <div class="hdimg" v-for="item in activityslist" :key="item.id">
        <img :src="item.icon" alt="" />
      </div>
    </div>
    <!-- <van-grid :border="false" :column-num="3">
      <van-grid-item v-for="item in activityslist" :key="item.id">
        <van-image :src="item.icon" class="hdimg" />
      </van-grid-item>
    </van-grid> -->

    <!-- 活动图结束 -->
    <!-- 导航按钮 -->
    <div class="dhbt">
      <van-grid column-num="5" :border="false">
        <van-grid-item
          to="/Goods"
          icon="http://imooc.hybrid.lgdsunday.club/img/jingDongChaoShi.ad21df4d.png"
          text="京东超市"
        />
        <van-grid-item
          to="/Goods"
          icon="http://imooc.hybrid.lgdsunday.club/img/haiTunQuanQiu.54597de3.png"
          text="海囤全球"
        />
        <van-grid-item
          to="/Goods"
          icon="http://imooc.hybrid.lgdsunday.club/img/jingDongFuShi.13729a19.png"
          text="京东服饰"
        />
        <van-grid-item
          to="/Goods"
          icon="http://imooc.hybrid.lgdsunday.club/img/jingDongShengXian.22b8843b.png"
          text="京东生鲜"
        />
        <van-grid-item
          to="/Goods"
          icon="http://imooc.hybrid.lgdsunday.club/img/jingDongDaoJia.d644304a.png"
          text="京东到家"
        />
        <van-grid-item
          to="/Goods"
          icon="	http://imooc.hybrid.lgdsunday.club/img/chongZhiJiaoFei.2c954f82.png"
          text="充值缴费"
        />
        <van-grid-item
          to="/Goods"
          icon="http://imooc.hybrid.lgdsunday.club/img/chongZhiJiaoFei.2c954f82.png"
          text="9.9元拼"
        />
        <van-grid-item
          to="/Goods"
          icon="http://imooc.hybrid.lgdsunday.club/img/lingJuan.5ff084a4.png"
          text="领劵"
        />
        <van-grid-item
          to="/Goods"
          icon="http://imooc.hybrid.lgdsunday.club/img/zhuanQian.dbaa12df.png"
          text="赚钱"
        />
        <van-grid-item
          to="/Goods"
          icon="http://imooc.hybrid.lgdsunday.club/img/quanBu.34bf33e3.png"
          text="全部"
        />
      </van-grid>
    </div>
    <!-- 导航按钮结束 -->
    <!-- 秒杀模块 -->
    <div class="miaosha">
      <div class="mstop">
        <div>京东秒杀</div>
        <div class="msright">
          <span class="msleft">16点场</span>
          <span v-if="this.times <= 16" class="msrights"
            ><van-count-down :time="time">
              <template #default="timeData">
                <span class="block">{{
                  timeData.hours > 9 ? timeData.hours : "0" + timeData.hours
                }}</span>
                <span class="colon">:</span>
                <span class="block">{{
                  timeData.minutes > 9
                    ? timeData.minutes
                    : "0" + timeData.minutes
                }}</span>
                <span class="colon">:</span>
                <span class="block">{{
                  timeData.seconds > 9
                    ? timeData.seconds
                    : "0" + timeData.seconds
                }}</span>
              </template>
            </van-count-down></span
          >
          <span v-else-if="this.times <= 17" class="msrights msjs">进行中</span>
          <span v-else class="msrights msjs">活动结束</span>
        </div>
      </div>
      <div class="msbottom">
        <div class="msgoods" v-for="item in miaoshalist" :key="item.id">
          <div class="msgoodsimg">
            <img :src="item.icon" alt="" />
          </div>
          <span class="msj">￥{{ item.price }}</span>
          <span class="msy">￥169</span>
        </div>
      </div>
    </div>

    <!-- 秒杀模块结束 -->
    <!-- 好货抢购 -->
    <div class="hhqg">
      <img
        src="	http://imooc.hybrid.lgdsunday.club/img/haoHuoQiang.a976e93f.gif"
        alt=""
      />
    </div>
    <!--好货抢购结束 -->
    <!-- 商品瀑布流 -->
    <goodItemCom></goodItemCom>
    <!-- 商品结束 -->

    <!-- 底部占位盒子 -->
    <div class="dbzw"></div>
    <!-- 底部占位盒子结束 -->
    <LayoutView></LayoutView>
  </div>
</template>

<script>
import "@/style/index.css";
import LayoutView from "@/views/layout/LayoutView.vue";
import { activitysApi, miaoshaApi, swiperApi } from "@/api/home";
import goodItemCom from "@/components/goodItemCom.vue";

export default {
  components: {
    LayoutView,
    goodItemCom,
  },
  data() {
    return {
      imglist: [], //存储轮播图列表数据
      activityslist: [], //活动列表
      miaoshalist: [], // 秒杀
      time: 0, //倒计时
      times: 1,
      token: "595fe950-7ebd-11ed-aa1f-dd279271aa3a",
      onoff: false,
    };
  },
  async created() {
    try {
      let { data } = await swiperApi(this.token);
      this.imglist = data.data.list;
      let res = await activitysApi(this.token);
      this.activityslist = res.data.data.list;
      let ms = await miaoshaApi(this.token);
      this.miaoshalist = ms.data.data.list;
    } catch (error) {
      console.log(error);
    }
    let timeID = setInterval(() => {
      //倒计时模块 应用vant 组件
      var d = new Date();
      let hh = d.getHours();
      let m = d.getMinutes();
      let s = d.getSeconds();
      if (s > 0) {
        s = 60 - s;
        m = m + 1;
      }
      if (m > 0) {
        m = 60 - m;
        hh = hh + 1;
      }
      let h = 16;
      if (hh < 17) {
        h = h - hh;
        // console.log("现在小时" + h);
        this.time = h * 60 * 60 * 1000 + m * 60 * 1000 + s * 1000;
        this.times = 16;
      } else if (hh > 17) {
        this.times = 18;
        this.time = 0;
      } else {
        this.times = 17;
      }

      if (this.time == 0) {
        //如果倒计时毫秒=0 则关闭倒计时
        clearInterval(timeID);
      }
    }, 1000);
  },
  mounted() {
    //页面被卷曲头部的距离 大于 轮播图距离页面的距离则添加白色背景
    // if (this.$refs.lbt.offsetTop > window.scrollTop) {
    //   console.log(11);
    // }
  },
  updated() {
    window.addEventListener("scroll", this.on);
    // console.log(this.$refs.hd.scrollTop);
  },
  methods: {
    on() {
      if (document.documentElement.scrollTop > 100) {
        this.onoff = true;
      } else {
        this.onoff = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.van-count-down {
  color: red;
  line-height: 1.5rem;
  font-size: 0.8rem;
}
.msrights {
  flex: 50%;
  display: inline-block;
  margin: 0 15px;
  color: red;
}
.msleft {
  flex: 50%;
  display: inline-block;
  background-color: red;
  color: #fff;
  padding: 0 20px;
}
.msright {
  display: flex;
  margin-left: 30px;
  width: 8rem;
  border: 5px solid red;
  border-radius: 20px;
}
.msjs {
  font-size: 0.5rem;
  line-height: 1.5rem;
  display: inline-block;
}

.mstop {
  display: flex;
}
/deep/ .van-grid-item {
  height: 200px;
}
/deep/ .van-grid-item__icon {
  height: 3rem;
  width: 3rem;
}
/deep/ .van-grid-item__text {
  font-size: 0.8rem;
}
/deep/ .van-icon__image {
  height: 100%;
  width: 100%;
}
/deep/ .van-grid-item__content {
  padding: 5px 8px !important;
}
.dhbt {
  background-color: #fff;
}
.hd {
  display: flex;
  margin-top: 1rem;
  border-radius: 20px 20px 0 0;

  z-index: 2;
}
.hdimg {
  z-index: 2;
  flex: 33.333%;
}
// /deep/.hdimg {
//   width: 100%;
//   height: 100%;
// }
.hdimg img {
  z-index: 2;
  width: 100%;
}
/deep/.van-swipe {
  height: 16rem;
}
/deep/ .van-swipe__indicator {
  width: 1rem;
  height: 1rem;
}
.my-swipe .van-swipe-item {
  z-index: 21;

  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.nabar {
  position: fixed;
  width: 100%;
  // background-color: #fff;

  z-index: 1;
}
.nabars {
  position: fixed;
  width: 100%;
  // background-color: #fff;

  z-index: 1;
  background-color: #fff;
}

/deep/.jl {
  position: absolute;
  right: 80px;
  top: 80px;
  width: 66px;
  height: 82px;
  line-height: 80px;
  text-align: center;

  opacity: 0.5;
}
.hamburgerbtn {
  position: absolute;
  left: 50px;
  top: 80px;
  width: 66px;
  height: 82px;
  line-height: 80px;
  text-align: center;

  opacity: 0.5;
  .toutiao {
    font-size: 100px;
  }
}
/deep/.van-search {
  width: 85%;
  margin: 0.8rem auto;
  background-color: rgb(0 0 0 / 0);
}
/deep/.van-search__content {
  background-color: #ffff;
}
/deep/ .van-swipe {
  height: 700px;
}
/deep/ .imgsw {
  height: 100%;
  width: 100%;
}
/deep/ .van-grid-item {
  height: 5rem;
}
</style>
